<template>
		<view class="shopList" @click.stop="goDetails">
			<view class="top" v-if = 'listStyle==0'>
				<text class="time">{{param.add_time}}</text>
				<text class="status" v-if="param.status==0" style="color:#FD6431">待付款</text>
				<text class="status" v-if="param.status==1&&param.type==1" style="color:#FD6431">待使用</text>
				<text class="status" v-if="param.status==1&&param.type==2">待发货</text>
				<text class="status" v-if="param.status==2&&param.type==2">已发货</text>
				<text class="status" v-if="param.status==3">已完成</text>
				<text class="status" v-if="param.status==5" style="color:#FFC80B">售后中</text>
				<text class="status" v-if="param.status==6">已退款</text>
				<text class="status" v-if="param.status==9" style="color:#DADAE3">已过期</text>
				<text class="status" v-if="param.status==10" style="color:#DADAE3">已取消</text>
			</view>
			<view class="content">
				<img class="shopImg" :src="param.img" v-if='listStyle!==3'>
				<img class="shopImg" :src="param.abbreviate_img" v-if = 'listStyle==3'>
				<view class="content-text">
					<text class="title">{{param.title}}</text>
					<text class="price payment font-bold" v-if="listStyle!=0&&listStyle!=3">￥{{param.price}}/{{param.unit}}</text>
					<text class="price payment font-bold"  v-if="listStyle==0">￥{{param.amount}}</text>
					</br>
					<text class="describe" v-if="listStyle!=3">{{param.brief}}</text>
					<text class="describe" v-if="listStyle==3">{{param.describe}}</text>
					</br>
					<text class="model" v-if="listStyle!=3">规格：{{param.spec_title}}</text>
					<text class="model" v-if="listStyle==3">规格：{{param.specs}}</text>
					<text class="num" v-if="listStyle!=3">数量：{{param.num}}</text>

				</view>
				<view class="opera" v-if = 'listStyle==0'>
					<!-- 已取消 已退款 -->
					<text v-if = 'param.status==10' @click.stop="moreOne(param)" class="btn-comfirm">再来一单</text>
					<text v-if = 'param.status==3' @click.stop="moreOne(param)" class="btn-comfirm">再来一单</text>
					<text v-if = 'param.status==6' @click.stop="moreOne(param)" class="btn-comfirm">再来一单</text>
					<text v-if = 'param.status==9' @click.stop="moreOne(param)" class="btn-comfirm">再来一单</text>
					<text v-if = 'param.service_status==3' @click.stop="moreOne(param)" class="btn-comfirm">再来一单</text><!-- 跳转统一支付页面 -->
					<!-- 待付款 -->
					<text v-if = 'param.status==0' @click.stop="payNow(param)" class="btn-comfirm">立即支付</text><!-- 跳转统一支付页面 -->
				    <text v-if = 'param.status==0' @click.stop="cancelPay(param)" class="btn-cancel">取消订单</text><!-- 弹窗 -->
					<!-- 待使用 -->
					<text v-if = 'param.status==1' @click.stop="couponCode(param)" class="btn-comfirm">查看券码</text><!-- 跳转详情 -->
					<text v-if = 'param.status==1&&param.type==1&&param.overdue==2' @click.stop="service(param)" class="btn-cancel">申请售后</text><!-- 跳转售后页面 -->
					<text v-if = 'param.status==1&&param.type==2' @click.stop="service(param)" class="btn-cancel">申请售后</text>
					<text v-if = 'param.status==3&&param.type==2&&param.rake_back_status==2&&param.is_bargain_price==2' @click.stop="service(param)" class="btn-cancel">申请售后</text>
					<!-- 已完成 -->
					<text v-if = 'param.status==3&&!param.evaluate_time' @click.stop="feedback(param)" class="btn-cancel">反馈体验</text><!-- 跳转评价页面 -->
					<!-- 已取消 -->
					<text v-if = 'param.status==10' @click.stop="deleteOrder(param)" class="btn-cancel">删除订单</text><!-- 弹窗 -->
					<!-- 售后中 -->
					<text v-if = 'param.status==5&&param.service_status<3' @click.stop="track(param)" class="btn-comfirm">跟踪售后</text><!-- 跳转详情 -->
					<text v-if = 'param.status==5&&param.service_status<3' @click.stop="contact(param)" class="btn-cancel">联系客服</text><!-- 弹窗 -->
					
				</view>
				<view class="details" v-if = 'listStyle==1'>
                    <text class="details-name details-shop">商品：</text><text class="font-bold">50</text></br>
					<text class="details-name details-freight">运费：</text><text class="font-bold">100</text></br>
					<text class="details-name details-sum font-bold" >合计：</text><text class="font-bold payment">100</text></br>
				</view>
				<view class="details details-sp" v-if = 'listStyle==2'>
					<text class="details-name details-sum " >合计：</text><text class="font-bold payment">{{param.amount}}</text></br>
				</view>
				<view class="details details-sp" v-if = 'listStyle==3'>
					<text class="font-bold payment">￥{{param.price}}/{{param.unit}}</text></br>
				</view>
			</view>
		</view>
</template>

<script>
	export default {
		props:['param','listStyle'],
		data() {
			return {
				
			}
		},
		// onLoad() {
		// 	console.log(param.carousel_img)
		// },
		created() {
			console.log(this.param)
		},
		methods: {
	        payNow:function(data){//立即支付
				this.$emit('payNow',data)
			},
			cancelPay:function(data){//取消支付
				this.$emit('cancelPay',data)
			},
			service:function(data){//申请售后
				this.$emit('service',data)
			},
			couponCode:function(data){//查看券码
				this.$emit('couponCode',data)
			},
			moreOne:function(data){//再来一单
				this.$emit('moreOne',data)
			},
			feedback:function(data){//反馈体验
				this.$emit('feedback',data)
			},
			deleteOrder:function(data){//删除订单
				this.$emit('deleteOrder',data)
			},
			contact:function(data){//联系客服
				this.$emit('contact',data)
			},
			track:function(data){//跟踪售后
				this.$emit('track',data)
			},
			goDetails:function(data){//订单详情
				if(this.listStyle==0){
					this.$emit('goDetails',data)
				}
			}
		}
	}
</script>

<style scoped>
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		box-sizing: border-box;
		font-size: 0.75rem ;
	}
	.shopList{
		width: 92%;
		background-color:#fff ;
		margin: 1rem 4% 0;
		border-radius:8px;
		box-shadow: 0 0 5px 2px #eee;
		padding: 0 4%;
	}
	.top{
		height: 2rem;
		line-height: 2rem;
	}
	.time{
		color: #4E5366;
	}
	.status{
		float: right;
	}
	.payment{
		color:#FD6431;
	}
	.completed{
		color:#FFC80B
	}
	.content{
		padding: 0.5rem 0;
		width: 100%;
	}
	.shopImg{
		border-radius:8px 8px 0 0 ;
		width: 4rem;
		height: 4rem;
		vertical-align: top;
	}
	.content-text{
		display: inline-block;
		height: 5rem;
		width: 11.75rem;
		margin-left: 1rem;
	}
	.title{
		font-weight: bold;
		color: #1D1E21;
		width: 7rem;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.describe{
		font-size: 0.6rem;
		color: #1D1E21;
	}
	.opera{
		width: 100%;
		border-top: 1px dashed #eee;
		height:2.2rem;
		box-sizing: content-box;
	}
	.details{
		padding:0.5rem 0 1.5rem 0;
		width: 100%;
		box-sizing: content-box;
		border-top: 1px dashed #eee;
	}
	.opera text{
		float: right;
		display: inline-block;
		margin: 0.5rem 0 0 0.5rem;
		padding: 0.3rem 0.75rem;
		border-radius: 1rem;
	}
	.details text{
		float: right;
		display: inline-block;
		margin: 0.25rem 0;
	}
	.content-text text{
		display: inline-block;
		margin-bottom: 0.3rem;
	}
	.model , .num{
		color: #aaa;
	}
	.num , .price{
		float: right;
	}
	.btn-comfirm{
		color:#FD6431;
		border: 1px solid #FD6431;
	}
	.btn-cancel{
		color:#565656;
		border: 1px solid #E5E5E5;
	}
	.details .details-name{
		float: left;
		margin-left: 70%;
	}
	.font-bold{
		font-weight: bold;
	}
	.details-sp{
		position: relative;
		top:0.75rem
	}
</style>
